<!-- 返回顶部组件 -->
<!-- 使用说明：<go-top></go-top> -->
<!-- 无输入，无输出 -->
<template>
  <transition name="fade">
    <div title="返回顶部" class="goup" @click="goUp" v-show="scrolled">
      <i class="fa fa-level-up"></i>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'gotop',
  data () {
    return {
      scrolled: false
    }
  },
  mounted () {
    // 组件一旦渲染到DOM中，就添加滚动事件监听，每次滚动鼠标滚轮，都会使回调函数执行
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 判断是否要给变量赋值成true
    handleScroll () {
      this.scrolled = window.scrollY > 200
    },
    goUp () {
      // 简单无动画版
      // window.scrollTop(0,0);
      // 流畅版
      (function smoothscroll () {
        let currentScroll =
          document.documentElement.scrollTop || document.body.scrollTop
        if (currentScroll > 0) {
          window.requestAnimationFrame(smoothscroll)
          window.scrollTo(0, currentScroll - currentScroll / 5)
        }
      })()
    }
  }
}
</script>
<style scoped lang="scss">
  .goup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    i {
      font-size: 30px;
      color: #324157;
      &:hover {
        color: #20a0ff;
        cursor: pointer;
      }
    }
  }

  // 渐隐效果
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>
